import * as echarts from '../../components/ec-canvas/echarts';

const data = {
  root: [
    { name: '类别A', value: 335 },
    { name: '类别B', value: 310 },
    { name: '类别C', value: 234 },
    { name: '类别D', value: 135 },
    { name: '类别E', value: 1548 }
  ],
  '类别A': [
    { name: '子类别A1', value: 100 },
    { name: '子类别A2', value: 120 },
    { name: '子类别A3', value: 115 }
  ],
  '类别B': [
    { name: '子类别B1', value: 150 },
    { name: '子类别B2', value: 160 }
  ],
  '类别C': [
    { name: '子类别C1', value: 80 },
    { name: '子类别C2', value: 90 },
    { name: '子类别C3', value: 64 }
  ]
};
 
Page({
  data: {
    ec: {
      lazyLoad: true 
    },
    title: '主分类数据',
    showBack: false,
    chartData: data.root, 
    history: []
  },
 
  onLoad() {
    this.initChart(); 
  },
 
  initChart() {
    this.selectComponent('#mychart-dom-pie').init((canvas,  width, height, dpr) => {
      const chart = echarts.init(canvas,  null, {
        width: width,
        height: height,
        devicePixelRatio: dpr 
      });
      
      this.setOption(chart,  this.data.chartData); 
      
      // 保存图表实例 
      this.chart  = chart;
      
      return chart;
    });
  },
 
  setOption(chart, data) {
    const option = {
      backgroundColor: '#ffffff',
      title: {
        text: this.data.title, 
        left: 'center',
        top: 20,
        textStyle: {
          color: '#333',
          fontSize: 16 
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: data.map(item  => item.name) 
      },
      series: [
        {
          name: '数据分布',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false 
          },
          data: data,
          // 添加点击事件 
          selectedMode: 'single'
        }
      ]
    };
    
    chart.setOption(option); 
    
    // 绑定点击事件 
    chart.on('click',  this.handleChartClick.bind(this)); 
  },
 
  handleChartClick(params) {
    const name = params.name; 
    
    // 检查是否有子数据 
    if (data[name]) {
      // 保存当前状态到历史记录 
      const history = [...this.data.history]; 
      history.push({ 
        title: this.data.title, 
        chartData: this.data.chartData  
      });
      
      // 更新视图 
      this.setData({ 
        title: `${name}子分类`,
        chartData: data[name],
        showBack: true,
        history 
      });
      
      // 重新渲染图表 
      this.setOption(this.chart,  data[name]);
    }
  },
 
  handleBack() {
    const history = [...this.data.history]; 
    if (history.length  > 0) {
      const prevState = history.pop(); 
      
      this.setData({ 
        title: prevState.title, 
        chartData: prevState.chartData, 
        showBack: history.length  > 0,
        history 
      });
      
      // 重新渲染图表 
      this.setOption(this.chart,  prevState.chartData); 
    }
  }
});